<script setup lang="ts">
type Props = {
  name?: string;
  handleType?: string;
  content?: string;
  imgs?: string[];
};
let prop = withDefaults(defineProps<Props>(), {
  name: "受理部门名称",
  handleType: "回复",
  content: "内容",
  imgs: () => [],
});
let preview = () => {
  console.log("预览图片了吧");
};
</script>

<template>
  <div class="dept">
    <div class="headers">
      {{ name }}
      <span class="type">{{ handleType }}</span>
    </div>
    <div class="time">2022-10-30 10:00</div>
    <div class="content">
      {{ content }}
      <span class="extend" v-if="content.length > 250"
        ><span class="extendTxt">扩展</span>&nbsp;<span>&#xe62d;</span></span
      >
    </div>
    <div class="images">
      <img @click.stop="preview" :src="v" v-for="(v, k) of imgs" :key="k" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.dept {
  padding-left: 20px;
  margin-top: 24px;
  margin-bottom: 25px;
  position: relative;
}

.dept::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #2163e0;
  background: #fff;
}

.headers {
  font-size: 16px;
  color: #333333;
  .type {
    color: #2163e0;
    margin-left: 10px;
    font-weight: 600;
  }
}
.time {
  font-size: 12px;
  color: #90949e;
  margin: 4px 0px 6px 0px;
}
.content {
  font-size: 14px;
  color: #90949e;
}

// 扩展按钮
.extend {
  color: #2163e0;
  cursor: pointer;
  float: right;

  .extendTxt {
    font-size: 14px;
  }
}

// 图片详情列表
.images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;

  > img {
    width: 72px;
    height: 54px;
    background-color: #d8d8d8;
    border-radius: 3px;
    cursor: pointer;
  }
}
</style>
